$(function(){
    //validate的基本使用
        // $('#myform').validate();
        /* $('#myform').validate({//格式:key:value
            //规则
            rules:{
                //定义需要验证的规则  主要是通过标签上的name来判定的
                //用户名
                user:{
                    required:true,
                    maxlength:5
                },
                pwd:{
                    required:true 
                }
            },
            //提示信息
            messages:{
               //用户名
               user:{
                    required:'请输入用户名',
                    maxlength:'用户名过长'
                },
                pwd:{
                    required:'请输入密码' 
                }
            }
        }); */



    //自定义规则    

        $('#myform').validate(
            {
                rules:{
                    user:{
                        required:true,
                        isUser:true
                    },
                    pwd:{
                        required:true,
                        isPwd:true 
                    }
                },
                messages:{
                    user:{
                        required:'请输入你的用户名'
                    },
                    pwd:{
                        required:'请输入你的密码'
                    }
                }
            }
        );


    //自定义规则列表
    /* 
    帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
    密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

             jQuery.validate的optional(element),用于表单控件的值不为空时才触发验证。
    */
    jQuery.validator.addMethod("isUser", function(value, element) {   
        var tel = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        return this.optional(element) || (tel.test(value));
    }, "字母开头，允许5-16字节，允许字母数字下划线");

    //密码
    jQuery.validator.addMethod("isPwd", function(value, element) {   
        var tel = /^[a-zA-Z]\w{5,17}$/;
        return this.optional(element) || (tel.test(value));
    }, "以字母开头，长度在6~18之间，只能包含字母、数字和下划线");


    //同意协议操作   如果同意按钮已经选中,此时表单才能提交  给btn设置背景色及disabled

        $('#isagree').click(function(){
            // console.log(111)
            //获取当前input的状态值
            let status=$(this).prop('checked');

            //判定  如果status的值为true 表示已经选中  ==> btn背景高亮 ,并可以点击(去掉禁用)
            //如果status的值为false 表示没有选中  ==> btn背景灰色 ,并不可以点击(禁用)

            if(status){
                //选中

                $('.btn').css('background-color','#f60').prop('disabled',!status);
            }else{
                //没有选中
                $('.btn').css('background-color','').prop('disabled',!status);
            }
        })


})